<template>
  <div class="user-page">
    <div class="search-field">
      <el-form :model="searchForm" inline>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="searchForm.nickname" autocomplete="off" placeholder="请输入用户昵称"/>
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="searchForm.phone" autocomplete="off" placeholder="请输入手机号码"/>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button type="primary" @click="startSearch"> 查询 </el-button>
            <el-button  @click="startClear"> 清空 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="user-page-content">
      <div class="table-field">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          v-loading="tableLoading"
        >
        <el-table-column prop="openid" label="小程序openid" width="220" >
          </el-table-column>
          <el-table-column label="头像" width="80">
          <template #default="scope">
            <el-image
              :preview-teleported="true"
              style="width: 40px; height: 40px"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            >
              <template #error>
                <div class="image-slot">
                  <!-- <el-icon><icon-picture /></el-icon> -->
                </div>
              </template>
            </el-image>
          </template>
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="160" />
          <el-table-column prop="openid" label="openid" width="160">
          </el-table-column>
          <el-table-column prop="score" label="积分" width="70">
            <template #default="scope">
              <span v-if="scope.row.score">{{ scope.row.score }}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column prop="proxy" label="是否代理人" width="100" >
            <template #default="scope">
              <span v-if="scope.row.proxy == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="proxy" label="代理人推广标识" width="160" >
            <template #default="scope">
              <span v-if="scope.row.proxyKey">{{ scope.row.proxyKey }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="isLock" label="状态" width="80" >
            <template #default="scope">
              <span v-if="scope.row.isLock==1">已锁定</span>
              <span v-else>正常</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170" />
          <el-table-column label="操作" fixed="right" min-width="220px">
            <template #default="scope">
              <el-button
                v-if="scope.row.isLock!=1"
                type="danger"
                size="small"
                @click.prevent="showLockDialog(scope.row)"
                >账号锁定</el-button
              >
              <el-button
                v-else
                type="primary"
                size="small"
                @click.prevent="showUnlockDialog(scope.row)"
                >账号解锁</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click.prevent="showRemoveDialog(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-field">
        <el-pagination
          v-model:current-page="formData.pageIndex"
          v-model:page-size="formData.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      v-if="removeDialogVisible"
      v-model="removeDialogVisible"
      title="删除用户"
      width="400px"
    >
      <span>确定要删除当前用户？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="removeDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="startRemoveMember"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-if="lockDialogVisible"
      v-model="lockDialogVisible"
      title="锁定用户"
      width="400px"
    >
      <span>确定要冻结当前用户？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="lockDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="startLockMember"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-if="unlockDialogVisible"
      v-model="unlockDialogVisible"
      title="解锁用户"
      width="400px"
    >
      <span>确定要解锁当前用户？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="unlockDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="startUnlockMember"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getMemberPagination,
  removeUser,
  lockOrUnlockUser
} from "@/api/user-manage.api";
import { ElMessage } from "element-plus";

const formData = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

const searchForm = reactive({
  nickname: "",
  phone: "",
});

const removeDialogVisible = ref(false);
const lockDialogVisible = ref(false);
const unlockDialogVisible = ref(false);
/***
 * 开始搜索
 */
const startSearch = () => {
  let formData= { 
    nickname: '',
    phone: ''
  };
  if (searchForm.nickname) {
    formData.nickname = searchForm.nickname;
  }
  if (searchForm.phone) {
    formData.phone = searchForm.phone;
  }
  getDataList(formData);
};

/***
 * 清空搜索条件
 */
const startClear = () => {
  searchForm.phone = "";
  searchForm.nickname = "";
  getDataList();
};


const tableLoading = ref(false);
const tableData = ref([]);

const showLockDialog = (item:any)=>{
  lockDialogVisible.value = true;
  curSelectRow.value = item;
}
const showUnlockDialog = (item:any)=>{
  unlockDialogVisible.value = true;
  curSelectRow.value = item;
}
const showRemoveDialog = (item: any) => {
  removeDialogVisible.value = true;
  curSelectRow.value = item;
  console.log("item: ", item);
};

const startUnlockMember = ()=>{
  let formData = {
    isLock: 0,
    userId: curSelectRow.value.id
  }
  lockOrUnlockUser(formData).then( ()=>{
    unlockDialogVisible.value = false;
    getDataList();
    ElMessage({
        message: "用户解锁成功",
        type: "success",
      });
  } ).catch( err=>{
    ElMessage({
        message: err.msg || err || "操作失败",
        type: "error",
      });
  } )
}

const startLockMember = ()=>{
  let formData = {
    isLock: 1,
    userId: curSelectRow.value.id
  }
  lockOrUnlockUser(formData).then( ()=>{
    lockDialogVisible.value = false;
    getDataList();
    ElMessage({
        message: "用户锁定成功",
        type: "success",
      });
  } ).catch( err=>{
    ElMessage({
        message: err.msg || err || "操作失败",
        type: "error",
      });
  } )
}

const curSelectRow = ref({
  id: undefined
});
const startRemoveMember = () => {
  console.log("...")
  let id = curSelectRow.value.id;
  removeUser([id])
    .then((res) => {
      console.log("success~~~~~", res);
      removeDialogVisible.value = false;
      ElMessage({
        message: "用户删除成功",
        type: "success",
      });
      getDataList();
    })
    .catch((err) => {
      ElMessage({
         message: err.msg || err,
        type: "error",
      });
    });
};

const handleSizeChange = (value: number) => {
  console.log("handleSizeChange...", value);
  formData.pageSize = value;
  getDataList();
};

const handleCurrentChange = (value: number) => {
  console.log("handleCurrentChange...", value);
  formData.pageIndex = value;
  getDataList();
};

const getDataList = (searchCondition = {}) => {
  tableLoading.value = true;
  getMemberPagination({
    pageSize: formData.pageSize,
    pageIndex: formData.pageIndex,
    ...searchCondition,
  })
  .then(function (res: any) {
      let list =res.list || [];
      tableData.value = list;
      formData.total = Number(res.total);
      tableLoading.value = false;
    })
    .catch((error) => {
      console.log(error);
      tableLoading.value = false;
    });
};


onMounted( async () => {
  getDataList();
});
</script>
<style lang="scss" scoped>
@import "./MemberList.scss"
</style>
